import {useDrag} from "react-dnd";
import {CreatePageModel, PageItemType} from "@/models/createPage";
import {Button, Image, Input, Upload} from "antd";
import {useSnapshot} from "@@/exports";
import * as assert from "assert";
import {ProForm, ProFormUploadDragger} from "@ant-design/pro-components";
import {UploadOutlined} from "@ant-design/icons";

export interface ComponentType {
    type: "drag" | "preview" | "config";
    item?: PageItemType;

}

const Config = (item: PageItemType) => {
    let state = CreatePageModel.state;
    const {currentItem} = useSnapshot(state)
    return <div key={item.id}>
    </div>
}

const DragAward = (props: ComponentType) => {
    const [{isDragging}, drag, preview] = useDrag(
        () => ({
            type: props.type === "drag" ? "bh" : "-",
            item: {id: `${Math.random().toFixed(0)}`, type: "award"} as PageItemType,
            collect: (monitor) => ({
                isDragging: !!monitor.isDragging()
            })
        }),
        []
    );
    switch (props.type) {
        case "drag":
            return <div ref={drag} key="-1"
                        style={{background: "#3f3f3f", textAlign: "center"}}>奖品模块</div>;
        case "preview":
            return <div ref={drag}
                        onClick={() => CreatePageModel.actions.setCurrentItem(props.item || {} as PageItemType)}>
                <div style={{
                    width: "100%",
                    minHeight: "200px",
                    background: "#3f3f3f",
                    padding: "10px"
                }}>
                    {props.item?.award?.map((award) => {
                        return <>
                            <div
                                style={{
                                    height: "100px",
                                    background: "red",
                                    display: "grid",
                                    // gridTemplateColumns: "1fr 1fr 1fr",
                                    gridTemplateAreas:"'img title title'"
                                }}
                            >
                                <div style={{gridArea: 'img'}}><img style={{height:"100px",width:"100px"}} src={award.awardHeadImg}/></div>
                                <div style={{gridArea: 'title'}}>{award.awardName}</div>
                            </div>
                        </>
                    })
                    }

                </div>
            </div>
        case "config":
            return <Config item={props.item}/>
    }

}

export default DragAward